<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客房信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.21/dist/css/layui.css" rel="stylesheet">
</head>
<script>
    let userSession = sessionStorage.getItem("admin");
    console.log(userSession)
    if (userSession === null){
        window.location.href = "index.html";
    }
</script>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="background-color: #c0c4cc">
        <div class="layui-logo layui-hide-xs layui-bg-black">酒店预定管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    <span id="head_user"></span>
                    <script>
                        var value = sessionStorage.getItem("name");
                        document.getElementById("head_user").textContent=value
                    </script>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <script>
            var value = sessionStorage.getItem("admin");
            if (value ===null){
                alert("请先登录!")
                window.location.href = "../login/login.html"
            }
        </script>
        <div class="layui-side-scroll" style="background-color:sandybrown;">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" style="background-color:sandybrown">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">个人信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="person_information.html">个人信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">酒店订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="OrderList.html">预定房间订单</a></dd>
                        <dd><a href="checkinList.html">已入住房间订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">客房信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guestroom_list.html">客房列表</a></dd>
                        <dd><a href="roomType.html">房间类型</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">酒店活动管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="activity.html">活动管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">会员管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="member_management.html">会员列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="index.html">首页</a>
                      <a><cite>客房信息管理</cite></a>
                      <a><cite>客房列表</cite></a>
                </span>
        </blockquote>
        <!--        添加按钮-->
        <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <div class=class="layui-btn-container">
                      <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-event="insert_room" id="insert_room">添加房间</button>
                  </div>
                </span>
        </blockquote>
        <!--        数据表格-->
        <table class="layui-hide" id="roomData"></table>

    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        客房信息页面
    </div>
</div>

<script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function(othis){ // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function(){  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
<script src="/jquery/jquery-3.6.0.js"></script>

<!--新增模态框-->
<script type="text/html" id="insert_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_roomNum" class="layui-input" placeholder="请输入房间号">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间主图</label>
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 单图片上传
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">面积</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_area" class="layui-input" placeholder="请输入房间面积">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">每晚价格</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_price" class="layui-input" placeholder="请输入每晚价格">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间简介</label>
            <div class="layui-input-inline" style="height: 50px">
                <textarea name="" placeholder="请输入房间简介" class="layui-textarea" id="insert_introduction"></textarea>
            </div>
        </div><br/><br/><br/>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">所属房间</label>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="" id="select_roomType">
                    <option value="">选择房间类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-pane" id="insert_status">
            房间状态：
            <input type="radio" name="AAA" value="1" title="空闲">空闲
            <input type="radio" name="AAA" value="2" title="已预订" checked>已预订
            <input type="radio" name="AAA" value="3" title="已入住">已入住
        </div>
    </div>
</script>
<!--更新模态框-->
<script type="text/html" id="update_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-inline">
                <input type="text" id="update_roomNum" class="layui-input" placeholder="请输入房间号">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间主图</label>
            <button type="button" class="layui-btn" id="ID-upload-update-btn">
                <i class="layui-icon layui-icon-upload"></i> 单图片上传
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-update-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-update-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">面积</label>
            <div class="layui-input-inline">
                <input type="text" id="update_area" class="layui-input" placeholder="请输入房间面积">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">每晚价格</label>
            <div class="layui-input-inline">
                <input type="text" id="update_price" class="layui-input" placeholder="请输入每晚价格">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">房间简介</label>
            <div class="layui-input-inline" style="height: 50px">
                <textarea name="" placeholder="请输入房间简介" class="layui-textarea" id="update_introduction"></textarea>
            </div>
        </div><br/><br/><br/>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">所属房间</label>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="" id="update_roomType">
                    <option value="">选择房间类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-pane" id="update_status">
            房间状态：
            <input type="radio" name="AAA" value="1" title="空闲">空闲
            <input type="radio" name="AAA" value="2" title="已预订" checked>已预订
            <input type="radio" name="AAA" value="3" title="已入住">已入住
        </div>
    </div>
</script>
<!--数据表格-->
<script type="text/html" id="operationToolbar">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
</script>
<script>
        layui.use('table', function () {
            var table = layui.table;

            // 渲染表格
            table.render({
                elem: '#roomData',
                url: '/room/selectAll', // 后端接口地址
                method: 'get',           // 请求方法
                response: {              // 自定义解析规则
                    statusName: 'code',  // 后端返回状态码字段名
                    statusCode: 200,
                    dataName: 'data'
                },
                cols: [[
                    {field: 'romNum', title: '房间编号', width: 120, sort: true},
                    {
                        field: 'photoPath', title: '房间图片', width: 180, templet: function (res) {
                            return '<img src="/img/guestroomIamge/' + res.photoPath + '" alt="房间图片" style="width: 100px; height: 100px;">';
                        }
                    },
                    {field: 'area', title: '房间面积', width: 160},
                    {field: 'price', title: '房间价格', width: 150},
                    {
                        title: '房间类型', width: 150, templet: function (res) {
                            return '<em>' + res.roomType.catalog + '</em>';
                        }
                    },
                    {
                        field: 'status', title: '房间状态', width: 200, templet: function (res) {
                            switch (res.status) {
                                case 1:
                                    return "空闲";
                                case 2:
                                    return "已预订";
                                case 3:
                                    return "已入住";
                                default:
                                    return "未知状态";
                            }
                        }
                    },
                    {field: 'roomIntroduction', title: '房间简介', width: 180},
                    {field: 'right', title: '操作', width: 185, toolbar: '#operationToolbar'}
                ]],
                page: true,       // 启用分页
                // limits: [5, 10],  // 每页显示数量选项
                // limit: 5,         // 默认每页显示数量
                done: function (res, curr, count) {
                    this.count = res.data.length;
                    // alert(res.data.length);
                }
            });
            // });
            //添加按钮监听事件
            $('#insert_room').on('click', function (res) {
                layer.open({
                    type: 1,
                    title: '新增房间',
                    closeBtn: false,
                    area: ['450px', '670px'],
                    shade: 0.5,
                    id: 'LAY_layuipro',
                    btn: ['新增', '取消'],
                    btnAlign: 'c',
                    moveType: 1, // 拖拽模式，0或者1
                    content: $('#insert_form').html(),  // 引入自定义表单
                    btn1: function (index, layero) {
                        let romNum = $("#insert_roomNum").val();  // 获取房间号
                        let area = $("#insert_area").val();  // 获取房间面积
                        let price = $("#insert_price").val();  // 获取每晚价格
                        let introduction = $("#insert_introduction").val();  // 获取房间简介
                        let room_catalog_id = $("#select_roomType").val();
                        // 获取选中的房间状态的值
                        let selectedStatus = $("input[name='AAA']:checked").val();

                        $.ajax({
                            url: "/room/insert",  // 请求路径
                            type: "post",  // 请求的方式
                            cache: false,  // 关闭缓存
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify({
                                romNum: romNum,
                                area: area,
                                price: price,
                                roomIntroduction: introduction,
                                roomCatalogId: room_catalog_id,
                                status: selectedStatus
                            }),
                            datatype: "json",  // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 200) {
                                    layer.msg("新增房间成功!");
                                    layer.close(index);  // 关闭当前窗口
                                    table.reload('roomData');  // 刷新表格
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                            }
                        });
                    },
                    success: function (layero) {
                        // 确保数据已经加载
                        if (JSON_roomType.length === 0) {
                            layer.msg('房间类型数据加载失败');
                            return;
                        }

                        // 清空下拉框数据
                        $("#select_roomType").empty().append("<option value=''>选择房间类型</option>");

                        // 填充房间类型数据
                        JSON_roomType.forEach(function (res) {
                            $("#select_roomType").append("<option value='" + res.roomCatalogId + "'>" + res.catalog + "</option>");
                        });

                        layui.use(['form'], function () {
                            var form = layui.form;
                            form.render('select');  // 仅渲染 select 元素
                        });
                    }
                });
                // 图片上传
                layui.use(function () {
                    var upload = layui.upload;
                    var element = layui.element;
                    var layer = layui.layer;
                    var $ = layui.$;

                    var uploadInst = upload.render({
                        elem: '#ID-upload-demo-btn',  // 上传按钮
                        url: '/upload',  // 这里是实际上传的接口
                        before: function (obj) {
                            // 预读本地文件示例
                            obj.preview(function (index, file, result) {
                                $('#ID-upload-demo-img').attr('src', result);  // 显示上传的图片
                            });
                            element.progress('filter-demo', '0%');  // 重置进度条
                            layer.msg('上传中', {icon: 16, time: 0});
                        },
                        done: function (res) {
                            if (res.code > 0) {
                                return layer.msg('上传失败');
                            }
                            $('#ID-upload-demo-text').html('');  // 清空上传失败状态
                        },
                        error: function () {
                            var demoText = $('#ID-upload-demo-text');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        },
                        progress: function (n, elem, e) {
                            element.progress('filter-demo', n + '%');  // 更新进度条
                            if (n == 100) {
                                layer.msg('上传完毕', {icon: 1});
                            }
                        }
                    });
                });
            });

            // 监听操作列中的按钮
            table.on('tool(roomData)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {  // 编辑操作
                    layer.open({
                        type: 1,
                        title: '编辑房间',
                        closeBtn: false,
                        area: ['450px', '670px'],
                        shade: 0.5,
                        id: 'LAY_layuipro',
                        btn: ['编辑', '取消'],
                        btnAlign: 'c',
                        moveType: 1, // 拖拽模式，0或者1
                        content: $('#update_form').html(),  // 引入自定义表单
                        btn1: function (index, layero) {
                            let romNum = $("#update_roomNum").val();  // 获取房间号
                            let area = $("#update_area").val();  // 获取房间面积
                            let price = $("#update_price").val();  // 获取每晚价格
                            let introduction = $("#update_introduction").val();  // 获取房间简介
                            let room_catalog_id = $("#update_roomType").val();
                            // 获取选中的房间状态的值
                            let selectedStatus = $("input[name='AAA']:checked").val();
                            let room_id = data.roomInfoId;
                            $.ajax({
                                url: "/room/updateById",  // 请求路径
                                type: "post",  // 请求的方式
                                cache: false,  // 关闭缓存
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    romNum: romNum,
                                    area: area,
                                    price: price,
                                    roomIntroduction: introduction,
                                    roomCatalogId: room_catalog_id,
                                    status: selectedStatus,
                                    roomInfoId:room_id,
                                }),
                                datatype: "json",  // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 200) {
                                        layer.msg("更新房间成功!");
                                        layer.close(index);  // 关闭当前窗口
                                        table.reload('roomData');  // 刷新表格
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                }
                            });
                        },
                        success: function (layero) {
                            $("#update_roomType").val(data.roomType);
                            // 确保数据已经加载
                            if (JSON_roomType.length === 0) {
                                layer.msg('房间类型数据加载失败');
                                return;
                            }

                            // 填充其他字段
                            $("#update_roomNum").val(data.romNum);  // 填充房间号
                            $("#update_area").val(data.area);  // 填充房间面积
                            $("#update_price").val(data.price);  // 填充每晚价格
                            $("#update_introduction").val(data.roomIntroduction);  // 填充房间简介
                            $("input[name='AAA'][value='" + data.status + "']").prop("checked", true);

                            // 填充房间类型数据
                            JSON_roomType.forEach(function (res) {
                                $("#update_roomType").append("<option value='" + res.roomCatalogId + "'>" + res.catalog + "</option>");
                            });

                            layui.use(['form'], function () {
                                var form = layui.form;
                                form.render('select');  // 仅渲染 select 元素
                            });
                        }
                    });
                } else if (obj.event === 'delete') {  // 删除操作
                    alert('删除房间：' + data.roomInfoId);
                    let room_id = data.roomInfoId;
                    layer.confirm('确定删除该行数据吗？', function (index) {
                        // 向服务端发送删除请求
                        $.ajax({
                            url: '/room/deleteById_t',  // 后端删除接口
                            type: 'post',                 // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            data:{
                                roomInfoId: room_id,
                            },
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                if (response.code === 200) {
                                    layer.msg("删除用户成功!");
                                    obj.del();
                                    table.reload('roomData');  // 刷新表格
                                }else {
                                    layer.msg("删除失败！");
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                                layer.msg('网络错误，请稍后重试');
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
</script>
<!--查询房间类型-->
<script>
    let JSON_roomType = [];   //读取数据库中所有房间类型
    $.ajax({
        url:"/roomType/selectAll",
        type:"get",
        cache:false,
        dataType:"json",
        success:function (response){
            console.log("返回：" + response);
            if(response.code === 200){
                //把所有部门数据，存放到json中
                JSON_roomType = response.data;
            }
        },
        error:function(response){
            console.log("出错返回：" + response);
        }
    });
</script>

</body>
</html>